<template>
	<view class="index_shopcar">
		<view class="pic_content">
			<image :src="kefuLogo" mode=""></image>
		</view>
		<view class="content">
			<!-- <view class="uitem"> -->
			<view class="price_num">
				<!-- <span class="num">已选0件，</span> -->
				<span class="heji">合计：</span>
				<span class="price_r">￥{{params.machineProduct.price||params.price}} </span>
			</view>
			<!-- <view @click="handleClickInfo" class="tab_info"> -->
			<!-- <span class="status_info">查看明细</span> -->
			<!-- <image src="@/static/img/map.png" mode=""></image> -->
			<!-- </view> -->
			<!-- </view> -->
			<view class="pri">
				<button v-if="buy" :disabled="isDisabled" @click="handleClick" type="default">下单</button>
				<button v-if="pay" :disabled="isDisabled" @click="handleClick" type="default">
					<view class="pay">
						支付
					</view>
					<!-- <view class="nowPay">
						<u-count-down @change="onChange" :time="timestamp" format="mm:ss"></u-count-down>
					</view> -->
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setOrder,
		payment,
		pay
	} from '@/api/order.js'
	import kefuLogo from '@/pages/user/static/images/kefu.png'
	export default {
		data() {
			return {
				kefuLogo: kefuLogo,
				isDisabled: false,
				timestamp: 0,
				code: ''
			}
		},
		props: ['params', 'pay', 'buy', 'itemData', 'radioSelected'],
		mounted() {
			uni.hideLoading()
			if (this.pay) {
				let localTime = new Date().getTime()
				let currentItem = this.$store.getters.getTime({
					orderId: this.params.orderId,
					uid: this.$store.getters.uid
				})
				this.timestamp = (currentItem.endTime - localTime) || 0
			}
		},
		onShow() {},
		methods: {
			handleClickInfo() {
				this.$emit('clickInfo')
				if (this.pay) {
					this.$router.push({
						path: '/pages/user/prepayment/prepayment'
					})
				}
			},
			onChange(timestamp) {
				// console.log(timestamp);
			},
			// ref形式获取内部的值
			getSeconds() {
				// console.log(this.$refs.uCountDown.seconds);
			},
			handleClick(item) {
				// 下单
				if (this.pay) {
					if (this.radioSelected === "") {
						uni.showToast({
							title: '请选择支付方式',
							icon: 'error',
						})
					} else {
						uni.showLoading({
							title: '请稍后'
						});
						uni.getProvider({
							service: 'oauth'
						}).then(res => {
							let provider = res[1].provider[0]
							uni.login({
								provider: provider,
							}).then(res1 => {
								this.code = res1[1].code

								let resData = {
									"orderNo": this.itemData.orderId,
									"payChannel": "routine",
									"payType": "A",
								}
								pay(this.code, resData).then(res => {
									let paramsData = res.data.jsConfig
									if (res.code === 200) {
										uni.requestPayment({
											"appId": paramsData.appId,
											"nonceStr": paramsData.nonceStr,
											"package": paramsData.packages,
											"timeStamp": paramsData.timeStamp,
											"paySign": paramsData.paySign,
											"signType": 'MD5',
											success: (res1) => {
												uni.showToast({
													title: '支付成功',
												})
												setTimeout(() => {
													uni.hideLoading()
													uni.redirectTo({
														url: '/pages/user/order/all_order'
													})
												}, 1000)
											},
											fail: (res) => {
												setTimeout(() => {
													uni.hideLoading()
													uni.redirectTo({
														url: '/pages/user/prepayment/prepayment'
													})
												}, 1000)
											}
										})
									}
								}).catch(err => {
									uni.showToast({
										title: err
									})
								})
							}).catch(error => {
								reject(error)
							})
						})
					}

				} else if (this.buy) {
					uni.showLoading({
						title: '请稍后'
					});
					// this.isDisabled = true
					let order = {}
					order.mid = this.params.mid
					order.productId = this.params.productId
					order = {
						...order,
						'orderId': '',
						'totalPrice': this.params.price,
						'payValue': this.params.price,
						'cardId': '',
						'payType': 'A',
						'count': 1,
						'slotNo': this.params.slotNo
					}
					setOrder(order).then(res => {
						if (res.code === 200) {
							let resRes = res.data
							let jsonString = JSON.stringify(resRes)
							let encodeURIComponentStr = encodeURIComponent(jsonString)
							// 封装store中的数据
							let timeData = {
								createTime: new Date().getTime(),
								orderId: res.data.orderId,
								userId: this.$store.getters.uid
							}
							// 生成倒计时
							this.$store.commit('SET_CREATE_TIME', timeData)
							uni.navigateTo({
								url: `/pages/user/order/order?item=${encodeURIComponentStr}`
							})
						}
					}).catch(res => {
						// 创建时间 结束时间= 创建时间+五分钟
						// this.$store.commit('SET_CREATE_TIMT')

						uni.showToast({
							icon: 'error',
							title: '已有订单存在'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/user/prepayment/prepayment'
							})
						}, 500)

					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.index_shopcar {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		width: 100%;


		.pic_content {
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				margin-left: 50rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.content {
			display: flex;
			justify-content: center;
			align-items: center;

			.uitem {

				.price_num {
					.num {
						color: #b7b7b7;
						font-size: 24rpx;
					}

					.heji {
						font-size: 24rpx;
					}

					.price_r {
						font-size: 38rpx;
						color: #f86853;

					}
				}

				.tab_info {
					padding: 6rpx 0;
					float: right;

					.status_info {
						color: #f86853;
						padding: 0 10rpx;
						font-size: 24rpx;
						font-weight: bold;
					}

					image {
						width: 22rpx;
						height: 18rpx;
					}
				}
			}

			.pri {
				margin-left: 20rpx;
				width: 150rpx;
				margin-right: 50rpx;

				/deep/ .u-count-down text {
					color: #F86853;
				}

				button {
					background-image: linear-gradient(to right, #f8687d, #f86854);
					color: white;
					font-weight: bold;
					font-size: 40rpx;
					padding: 15rpx 30rpx;
					border-radius: 40rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					/deep/ .u-count-down text {
						color: #F86853;
					}

					view {
						font-size: 22rpx
					}
				}
			}





		}
	}
</style>
